<template>
  <div class="hello">
    <img
      alt="Vue logo"
      src="@/assets/vueLogo.png"
    >
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,
      <br>check out the
      <a
        href="https://cli.vuejs.org"
        target="_blank"
        rel="noopener"
      >vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li>
        <a
          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
          target="_blank"
          rel="noopener"
        >babel</a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
          target="_blank"
          rel="noopener"
        >eslint</a>
      </li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
          rel="noopener"
        >Core Docs</a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
          rel="noopener"
        >Forum</a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
          rel="noopener"
        >Community Chat</a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
          rel="noopener"
        >Twitter</a>
      </li>
      <li>
        <a
          href="https://news.vuejs.org"
          target="_blank"
          rel="noopener"
        >News</a>
      </li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li>
        <a
          href="https://router.vuejs.org"
          target="_blank"
          rel="noopener"
        >vue-router</a>
      </li>
      <li>
        <a
          href="https://vuex.vuejs.org"
          target="_blank"
          rel="noopener"
        >vuex</a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/vue-devtools#vue-devtools"
          target="_blank"
          rel="noopener"
        >vue-devtools</a>
      </li>
      <li>
        <a
          href="https://vue-loader.vuejs.org"
          target="_blank"
          rel="noopener"
        >vue-loader</a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
          rel="noopener"
        >awesome-vue</a>
      </li>
    </ul>

    <el-button
      type="primary"
      @click="toggle('normal')"
    >正常色</el-button>
    <el-button
      type="info"
      @click="toggle('gray')"
    >灰色</el-button>
  </div>
</template>

<script>
import grayscale from './grayscale.js';

export default {
  name: 'HelloWorld',
  data: () => ({
    msg: 'Welcome to Your Vue.js App'
  }),
  created() {
    const startTime = new Date();
    const endTime = new Date();
    grayscale(
      [
        startTime.setDate(startTime.getDate() - 1),
        endTime.setDate(endTime.getDate() + 1)
      ],
      true
    );
  },
  beforeDestroy() {
    this.toggle('normal');
  },
  methods: {
    toggle(theme) {
      const startTime = new Date();
      const endTime = new Date();
      switch (theme) {
        case 'normal':
          grayscale(['1990-01-01', '1990-01-02']);
          break;
        case 'gray':
          grayscale(
            [
              startTime.setDate(startTime.getDate() - 1),
              endTime.setDate(endTime.getDate() + 1)
            ],
            true
          );
          break;
        default:
          break;
      }
    }
  }
};
</script>

<style scoped lang="less" >
.hello {
  margin-top: 90px;
  text-align: center;
  font-size: 20px;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
  margin-bottom: 30px;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
